
<template>
    <Transition name="showrock">
        <div v-if="show" :style="`position: fixed; bottom: 15vh; right: ${right};`" :class="[istotop ? 'totop' : '',]">
            <svg
            class="roack" @click="totop" 
            t="1704711610090" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                p-id="3190" width="48" height="48">
                <path d="M511.48 737.43c-41.44-0.42-66 24.94-65.59 84.11 0.22 35.21 13.82 74.25 39.94 117.84l3.26 5.37 1.35 2c10.69 15.14 28.59 17.4 41 4.89a35 35 0 0 0 4.91-6.31c27.76-45.27 42-85.81 41.78-122.47-0.39-59.14-25.22-85-66.65-85.43zM322.17 815.16c-16.19-0.18-25.76 10.71-25.62 36.13 0.08 15.13 5.4 31.9 15.6 50.62l1.28 2.31 0.52 0.87c4.18
             6.51 11.17 7.48 16 2.1a15.12 15.12 0 0 0 1.92-2.71c10.84-19.45 16.4-36.86 16.32-52.6-0.13-25.42-9.83-36.53-26.02-36.72zM701.42 815.16c-16.19-0.18-25.77 10.71-25.63 36.13 0.09 15.13 5.4 31.9 15.61 50.62l1.27 2.31 0.53 0.87c4.18 6.51 11.17 7.48 16 2.1a14.64 14.64 0 0 0 1.92-2.71c10.85-19.45 16.41-36.86 16.32-52.6-0.13-25.42-9.83-36.53-26.02-36.72zM805.64 
            705.92L804 687.27 803 677c-11.87-118.22-33.32-197.38-67.29-239.5l-1.62-1.94 0.13-11.62-0.14-12.54q-1.48-68.58-19.15-129.4c-28.62-98.42-85.81-169.37-170.69-211a66 66 0 0 0-57.79-0.3l-7.24 3.62-7.21 3.89c-76.48 41.87-127.55 109.21-152.8 200.6L316.5 289l-2.66 11.31q-11.44 51.26-11.57 108.38v7.14l-1.77 1.38-2.94 2.47c-45 39.21-69.21 132.44-79.26 281.62l-0.09 2.41 0.16 2.44c1.93 19.23 23.16 31.68 41.2 22.48l128.1-65.5 4.2 0.91a674.72 674.72 0 0 0 128.41 13.48l14.42-0.06 14.44-0.34a666.87 666.87 0 0 0 86.46-8.79l4.56-0.83 124.6 65.15 2.47 1.14c19.13 7.87 40.21-6.85 38.41-27.87zM515.19 478c-48.65 0-88.08-39.27-88.1-87.71s39.45-87.72 88.1-87.72 
            88.09 39.28 88.1 87.72S563.84 478 515.19 478z" fill="#1296db" p-id="3191"></path>
            </svg>
        </div>
    </Transition>
</template>

<script setup>
import { computed, ref, watch, onMounted } from 'vue';
let right = ref(0)
let istotop = ref(false)
let show = ref(false)
const props = defineProps({
    svgRight: {
        Type: Number,
        default: 5
    }
})

watch(() => props, () => {
    right.value = props.svgRight + 'vw'
}, {
    immediate: true,
    deep: true,
})
function totop() {
    istotop.value = true
    window.scrollTo({
        top: 0,
        behavior: 'smooth'
    })
}
function scrollEvent(e) {
    if (document.documentElement.scrollTop >= 250) {
        show.value = true;
    } else {
        istotop.value = false;
        show.value = false;
    }
}
onMounted(() => {
    window.addEventListener('scroll', scrollEvent)
})
</script>

<style scoped >
.totop {
    animation: hide 0.8s ease-in-out forwards;
}

@keyframes hide {
    0% {
        opacity: 1;
        transform: translateX(0px);
    }

    100% {
        opacity: 0;
        transform: translateY(-100px);
    }


}

.box {
    height: 4vmax !important;
    width: 3vmax !important;
}

.roack {
    z-index: 999;
    height: 4vmax !important;
    width: 3vmax !important;
}

@media only screen and (max-width: 650px) {
    .roack {
        height: 5vmax !important;
        width: 5vmax !important;
    }
}

.showrock-enter-active,
.showrock-leave-active {
    transition: all 0.5s ease;
}

.showrock-enter-from,
.showrock-leave-to {
    transform: translateX(20px);
    opacity: 0;
}</style>